<!-- eslint-disable vue/multi-word-component-names -->

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { FilePdfFilled, FileZipFilled, UploadOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
const selectedKeys = ref(['1']);
const collapsed = ref(false);

const router = useRouter();

import logo from '@/assets/logo.png';

watch(selectedKeys, () => {
    console.log("点击", selectedKeys.value[0])
    router.push(selectedKeys.value[0]);
})
</script>
<template>
    <a-layout id="components-layout-demo-custom-trigger" style="height:100vh">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo">
                <!-- 正确使用<img>标签来显示Logo -->
                <img :src="logo" alt="Logo" style="height:100%;" width="100%" />
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item key="/one">
                    <FilePdfFilled />
                    <span>单页博客</span>
                </a-menu-item>
                <a-menu-item key="/zl">
                    <FileZipFilled />
                    <span>专栏合集</span>
                </a-menu-item>
                <a-menu-item key="3">
                    <upload-outlined />
                    <span>上传文档</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0; height:30px">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
            </a-layout-header>
            <a-layout-content
                :style="{ margin: '24px 16px', padding: '24px', background: 'rgb(218 228 233)', minHeight: '280px' }">
                <RouterView />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<style>
h1 {
    font-size: 24px;
    margin: 16px 0;
    text-align: center;
    /* 使用text-align代替align-items，因为h1是块级元素，不需要flex布局 */
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
}

.site-layout .site-layout-background {
    background: #fff;
}
</style>